<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <link rel="stylesheet" href="../css/animate.min.css">
    <style>
        .imgs{
            width: 100px;
            height: 100px;
            border-radius: 50%;
            margin: 30px;
        }
        .img1{
            transition: all 1s;
            animation: bounce 3s;
        }
        .v-enter{
            width: 0;
            height: 0;
            opacity: 0;
        }
        .v-leave{
            width: 100px;
            height: 100px;
            opacity: 1;
        }
        .v-enter-to{
            width: 100px;
            height: 100px;
            opacity: 1;
        }
        .v-leave-to{
            width: 0;
            height: 0;
            opacity: 0;
        }

        @keyframes slideIn{
            from{
                transform: translateX(-100%) scale(0);
                opacity: 0;
            }
            to{
                transform: translateX(100%) scale(1);
                opacity: 1;
            }
        }
        @keyframes slideOut{
            from{
                transform: translateX(100%) scale(0);
                opacity: 1;
            }
            to{
                transform: translateX(-1000%) scale(1);
                opacity: 0;
            }
        }

        .slide-enter-active{
            animation: slideIn 1s;
        }
        .slide-leave-active{
            animation: slideOut 1s;
        }
        .fade-enter-active{
            animation: fadeInRight 1s;
        }
        .fade-leave-active{
            animation: fadeOutRight 1s;
        }
        .zoom-enter-active{
            animation: zoomInDown 1s;
        }
        .zoom-leave-active{
            animation: zoomOutDown 1s;
        }
        .active{
            animation: heartBeat 3s 0s;
        }

    </style>
</head>
<body>
    <div id="app">
        <h2>{{title}}</h2>
        <div>
            <transition>
            <img :src="url" class="imgs img1" alt="" v-show="show">
            </transition>
            <button @click="show=!show">点击切换</button>
        </div>

        <div>
            <transition name="slide" appear appear-active-class="active">
                <img :src="url" class="imgs" alt="" v-show="show1">
            
            </transition>
            <button @click="show1=!show1">点击切换1</button>
        </div>

        <div>
            <transition name="fade" appear appear-active-class="active">
                <img :src="url" alt="" class="imgs" v-show="show2">
            </transition>
            <button @click="show2=!show2">点击切换2</button>
        </div>

        <div>
            <transition name="zoom" appear appear-active-class="active">
                <img :src="url" alt="" class="imgs" v-show="show3">
            </transition>
            <button @click="show3=!show3">点击切换3</button>
        </div>
    </div>

    <script>
        const vm = new Vue({
            data:{
                title:'Vue transition 组件实现动画',
                url:'https://img2.baidu.com/it/u=1347252749,346830019&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
                show:true,
                show1:true,
                show2:true,
                show3:true,
            }
        }).$mount('#app')

    </script>
    <!-- 
        route  页面切换    进入和离开的动画  
        Vue 提供了 transition 的封装组件  任何元素和组件添加进入/离开过渡
        v-if
        v-show
        组件切换  (动态组件切换  子组件切换)


        过渡  (0-1)  
        在进入/离开的过渡中，会有 6 个 class 切换
        v-enter  进入之前    开始帧 过渡
        v-enter-active 正在进入   animation
        v-enter-to  进入完成   结束帧

        v-leave  离开之前
        v-leave-active  正在离开
        v-leave-to   离开完成

        v-   transition 没有name 默认 v-
        transition 添加 name = fade  v 替换成 fade 

        初始化渲染 过渡 
        appear
        appear-active-class  动画 

        v-if / v-show 

        transition 单个元素的过渡
        transition-group 列表过渡 
     -->
</body>
</html>